<template>
    <a-spin :spinning="confirmLoading">
        <j-form-container :disabled="formDisabled">
            <!-- 主表单区域 -->
            <a-form :form="form" slot="detail">
                <a-row>
                    <a-col :span="24">
                        <a-form-item label="入库时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <j-date placeholder="请选择入库时间" v-decorator="['inTime']"
                                :trigger-change="true" :show-time="true"
                                date-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" />
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </j-form-container>
        <!-- 子表单区域 -->
        <a-tabs v-model="activeKey" @change="handleChangeTabs">
            <a-tab-pane tab="入库单子表" :key="refKeys[0]" :forceRender="true">
                <j-editable-table :ref="refKeys[0]" :loading="inOrderZiTable.loading"
                    :columns="inOrderZiTable.columns" :dataSource="inOrderZiTable.dataSource"
                    :maxHeight="300" :disabled="formDisabled" :rowNumber="true" :rowSelection="true"
                    :actionButton="true" />
            </a-tab-pane>
        </a-tabs>
        <a-row v-if="showFlowSubmitButton"
            style="text-align: center;width: 100%;margin-top: 16px;"><a-button @click="handleOk">提
                交</a-button></a-row>
    </a-spin>
</template>

<script>

import pick from 'lodash.pick'
import { getAction } from '@/api/manage'
import { FormTypes, getRefPromise } from '@/utils/JEditableTableUtil'
import { JEditableTableMixin } from '@/mixins/JEditableTableMixin'
import { validateDuplicateValue } from '@/utils/util'

export default {
    name: 'InOrderForm',
    mixins: [JEditableTableMixin],
    components: {
    },
    data() {
        return {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 6 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
            labelCol2: {
                xs: { span: 24 },
                sm: { span: 3 },
            },
            wrapperCol2: {
                xs: { span: 24 },
                sm: { span: 20 },
            },
            // 新增时子表默认添加几行空数据
            addDefaultRowNum: 1,
            validatorRules: {
            },
            refKeys: ['inOrderZi',],
            tableKeys: ['inOrderZi',],
            activeKey: 'inOrderZi',
            // 入库单子表
            inOrderZiTable: {
                loading: false,
                dataSource: [],
                columns: [
                    {
                        title: '客户编码',
                        key: 'customerCode',
                        type: FormTypes.input,
                        width: "200px",
                        placeholder: '请输入${title}',
                        defaultValue: '',
                    },
                    {
                        title: '客户名称',
                        key: 'customerName',
                        type: FormTypes.input,
                        width: "200px",
                        placeholder: '请输入${title}',
                        defaultValue: '',
                    },
                    {
                        title: '品番编码',
                        key: 'skuCode',
                        type: FormTypes.input,
                        width: "200px",
                        placeholder: '请输入${title}',
                        defaultValue: '',
                    },
                    {
                        title: '品番名称',
                        key: 'skuName',
                        type: FormTypes.input,
                        width: "200px",
                        placeholder: '请输入${title}',
                        defaultValue: '',
                    },
                    {
                        title: '背番',
                        key: 'backNum',
                        type: FormTypes.input,
                        width: "200px",
                        placeholder: '请输入${title}',
                        defaultValue: '',
                    },
                    {
                        title: '品牌',
                        key: 'brand',
                        type: FormTypes.input,
                        width: "200px",
                        placeholder: '请输入${title}',
                        defaultValue: '',
                    },
                    {
                        title: '个数',
                        key: 'number',
                        type: FormTypes.inputNumber,
                        width: "200px",
                        placeholder: '请输入${title}',
                        defaultValue: '',
                    },
                    {
                        title: '发票号',
                        key: 'invoiceNum',
                        type: FormTypes.input,
                        width: "200px",
                        placeholder: '请输入${title}',
                        defaultValue: '',
                    },
                    {
                        title: '集装箱号',
                        key: 'containerNum',
                        type: FormTypes.input,
                        width: "200px",
                        placeholder: '请输入${title}',
                        defaultValue: '',
                    },
                    {
                        title: '来源(国别或其他)',
                        key: 'source',
                        type: FormTypes.input,
                        width: "200px",
                        placeholder: '请输入${title}',
                        defaultValue: '',
                    },
                    {
                        title: '长(cm)',
                        key: 'length',
                        type: FormTypes.inputNumber,
                        width: "200px",
                        placeholder: '请输入${title}',
                        defaultValue: '',
                    },
                    {
                        title: '宽(cm)',
                        key: 'width',
                        type: FormTypes.inputNumber,
                        width: "200px",
                        placeholder: '请输入${title}',
                        defaultValue: '',
                    },
                    {
                        title: '高(cm)',
                        key: 'height',
                        type: FormTypes.inputNumber,
                        width: "200px",
                        placeholder: '请输入${title}',
                        defaultValue: '',
                    },
                    {
                        title: '单个重量(g)',
                        key: 'weight',
                        type: FormTypes.inputNumber,
                        width: "200px",
                        placeholder: '请输入${title}',
                        defaultValue: '',
                    },
                    {
                        title: '货位',
                        key: 'location',
                        type: FormTypes.input,
                        width: "200px",
                        placeholder: '请输入${title}',
                        defaultValue: '',
                    },
                ]
            },
            url: {
                add: "/inOrder/inOrder/add",
                edit: "/inOrder/inOrder/edit",
                queryById: "/inOrder/inOrder/queryById",
                inOrderZi: {
                    list: '/inOrder/inOrder/queryInOrderZiByMainId'
                },
            }
        }
    },
    props: {
        //流程表单data
        formData: {
            type: Object,
            default: () => { },
            required: false
        },
        //表单模式：false流程表单 true普通表单
        formBpm: {
            type: Boolean,
            default: false,
            required: false
        },
        //表单禁用
        disabled: {
            type: Boolean,
            default: false,
            required: false
        }
    },
    computed: {
        formDisabled() {
            if (this.formBpm === true) {
                if (this.formData.disabled === false) {
                    return false
                }
                return true
            }
            return this.disabled
        },
        showFlowSubmitButton() {
            if (this.formBpm === true) {
                if (this.formData.disabled === false) {
                    return true
                }
            }
            return false
        }
    },
    created() {
        //如果是流程中表单，则需要加载流程表单data
        this.showFlowData();
    },
    methods: {
        addBefore() {
            this.form.resetFields()
            this.inOrderZiTable.dataSource = []
        },
        getAllTable() {
            let values = this.tableKeys.map(key => getRefPromise(this, key))
            return Promise.all(values)
        },
        /** 调用完edit()方法之后会自动调用此方法 */
        editAfter() {
            let fieldval = pick(this.model, 'inTime')
            this.$nextTick(() => {
                this.form.setFieldsValue(fieldval)
            })
            // 加载子表数据
            if (this.model.id) {
                let params = { id: this.model.id }
                this.requestSubTableData(this.url.inOrderZi.list, params, this.inOrderZiTable)
            }
        },
        /** 整理成formData */
        classifyIntoFormData(allValues) {
            let main = Object.assign(this.model, allValues.formValue)
            return {
                ...main, // 展开
                inOrderZiList: allValues.tablesValue[0].values,
            }
        },
        //渲染流程表单数据
        showFlowData() {
            if (this.formBpm === true) {
                let params = { id: this.formData.dataId };
                getAction(this.url.queryById, params).then((res) => {
                    if (res.success) {
                        this.edit(res.result);
                    }
                })
            }
        },
        validateError(msg) {
            this.$message.error(msg)
        },
        popupCallback(row) {
            this.form.setFieldsValue(pick(row, 'inTime'))
        },

    }
}
</script>

<style scoped>
</style>